<template>
  <view class="home u-flex-col">
    <u-navbar class="nav" title="筛选" :title-bold="true" back-icon-color="#333333" title-color="#000"></u-navbar>
    <view class="u-p-20 form">
      <u-form :model="form" ref="uForm">
        <u-form-item :border-bottom="false" :label-style="labelStyle" label-position="top" prop="id" label="人员类型">
          <singleChooseBtn
            v-model="form.status"
            :custom-box-style="customBoxStyle"
            :custom-style="customBtnStyle"
            :list="btnList"
            :custom-check-style="customCheckStyle"
            @click="clickBtn"
          ></singleChooseBtn>
        </u-form-item>
      </u-form>
    </view>
    <view class="confrim-btn u-flex u-row-between u-p-t-20">
      <u-button :hair-line="false" shape="circle" form-type="reset" :custom-style="formCustomStyle" throttle-time="500" @click="reset">重置</u-button>
      <u-button :hair-line="false" shape="circle" :custom-style="formSubmitStyle" form-type="submit" throttle-time="500" @click="submit">确定</u-button>
    </view>
  </view>
</template>

<script>
import singleChooseBtn from '@/pages/components/singleChooseBtn'

export default {
  name: 'screen',
  components: {
    singleChooseBtn
  },
  data() {
    return {
      show: false,
      form: {
        status: ''
      },
      rules: {},
      labelStyle: {
        color: '#333333',
        fontWeight: '600'
      },
      // 报警状态按钮组组件样式
      customBtnStyle: {
        background: '#F1F5F3',
        margin: '2%',
        borderRadius: '32rpx',
        fontWeight: 400,
        color: '#666666',
        paddingLeft: '20rpx',
        paddingRight: '20rpx'
      },
      customCheckStyle: {
        background: '#5BAC844D',
        minWidth: '21%',
        margin: '2%',
        borderRadius: '32rpx',
        border: '1px solid #5BAC84',
        fontWeight: 400,
        color: '#5BAC84'
      },
      customBoxStyle: {
        justifyContent: 'space-start'
      },
      // 报警状态按钮组组件数据，数据checked是是否选中的，默认false布尔值，必填，label也是必填
      btnList: [
        //人员类型
        { id: '0', label: '带班领导', checked: false },
        { id: '1', label: '特种作业人员', checked: false },
        { id: '2', label: '安全员', checked: false },
        { id: '3', label: '瓦检员', checked: false }
      ],
      formCustomStyle: {
        color: '#333333',
        background: '#F1F5F3',
        width: '40%',
        border: 'none'
      },
      formSubmitStyle: {
        color: '#ffffff',
        background: '#5BAC84',
        width: '40%',
        border: 'none'
      },
      customStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        color: '#333333',
        background: '#F1F5F3',
        borderRadius: '20rpx',
        width: '40%',
        border: 'none'
      },
      submitStyle: {
        color: '#333333',
        background: '#5BAC84',
        borderRadius: '20rpx',
        width: '40%',
        border: 'none'
      }
    }
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  onLoad(options) {
    const { form } = options
    this.form = JSON.parse(form)
    this.initBtn()
  },
  mounted() {},
  methods: {
    initBtn() {
      if (this.form.status) {
        for (let i = 0; i < this.btnList.length; i++) {
          if (this.form.status === this.btnList[i].id) {
            this.btnList[i].checked = true
          }
        }
      }
    },
    clickBtn(e) {
      this.form.status = e.id
    },
    submit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          uni.$emit('handClickSingleScreen', this.form)
          uni.navigateBack({
            delta: 1
          })
        } else {
        }
      })
    },
    reset() {
      this.form = {
        status: ''
      }
      for (let i = 0; i < this.btnList.length; i++) {
        this.btnList[i].checked = false
      }
      uni.$emit('handClickSingleScreen', this.form)
      this.$refs.uForm.resetFields(this.rules)
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  .form {
    z-index: 999;
    box-shadow: 0px -3px 3px #f5f5f5;
    /deep/.u-input {
      .u-input__right-icon--select {
        display: none;
      }
    }
  }
  .popup-content {
    padding: 24rpx;
    text-align: center;
    .checkbox {
      &-item {
        height: 100rpx;
      }
      /deep/.u-checkbox-group {
        display: inline;
        .u-checkbox {
          border-bottom: 1px solid #dddddd;
          justify-content: space-between;
          flex-flow: row-reverse;
          .u-checkbox__icon-wrap {
            background: rgba(1, 72, 51, 0.2);
            border: none;
          }
        }
      }
    }
  }
  .confrim-btn {
    position: absolute;
    width: 100%;
    bottom: 50rpx;
  }
}
</style>
